/*
 * Copyright (C) 2016 Actor LLC. <https://actor.im>
 */

$min-scrollbar-width: 4px;
$min-scrollbar-height: 30px;
$max-scrollbar-width: $min-scrollbar-width + 2;
$default-scrollbar-color: $pigeon-post;

.scroll-wrapper {
  width: 100%;
  height: 100%;
}

.ss-container {
  position: relative;
  .ss-wrapper {
    position: relative;
    z-index: 1;

    overflow: hidden;

    width: 100%;
    height: 100%;
    .ss-scrollarea {
      position: relative;

      overflow: auto;

      width: 100%;
      height: 100%;
      margin-right: -18px;
      padding-right: 32px;
    }
  }

  .ss-scroll {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;

    width: $min-scrollbar-width;
    min-height: $min-scrollbar-height !important;

    cursor: pointer;
    transition: opacity 100ms linear;

    opacity: 0;
    background: $default-scrollbar-color;
    &:active,
    &:hover {
      width: $max-scrollbar-width;
    }

    &.ss-hidden {
      display: none;
    }
  }

  &:active,
  &:hover {
    .ss-scroll {
      opacity: 1;
    }
  }
}

.ss-grabbed {
  @include no-select();
}
